<script lang="ts" setup >
import { ref, onMounted } from 'vue'
import type { Ref } from 'vue';
import { getcomarr, getcomarr2 } from '@/api/community'
import { useRouter } from 'vue-router';
let router = useRouter()
const activeName = ref('first')
let comarr: Ref<any[]> = ref([])
let comarr2: Ref<any[]> = ref([])
onMounted(() => {
    getcomarr().then(res => {
        console.log(res);
        comarr.value = res.data
    })
    getcomarr2().then(res => {
        console.log(res);
        comarr2.value = res.data
    })
})
function goClassify(val: any) {
    router.push({
        path: "/classify",
        query: val
    })
}
</script>
<template>
    <div>
        <el-tabs v-model="activeName" stretch class="demo-tabs" @tab-click="">
            <el-tab-pane label="社区" name="first" style="padding: 10px;">
                <div style="display: flex;justify-content: space-evenly;">
                    <div @click="goClassify('1')"
                        style="display: flex;flex-flow: column wrap;justify-content: space-between;">
                        <img style="width: 64px;"
                            src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u403.png" alt="">
                        <div style="position:relative;bottom: 0;text-align: center;"><b>Steam</b></div>
                    </div>
                    <div @click="goClassify('2')"
                        style="display: flex;flex-flow: column wrap;justify-content: space-between;">
                        <img src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u480.png" alt="">
                        <div style="position:relative;bottom: 0;text-align: center;"><b>PS5</b></div>
                    </div>
                    <div @click="goClassify('3')"
                        style="display: flex;flex-flow: column wrap;justify-content: space-between;">
                        <img src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u481.png" alt="">
                        <div style="position:relative;bottom: 0;text-align: center;"><b>PS4</b></div>
                    </div>
                    <div @click="goClassify('4')"
                        style="display: flex;flex-flow: column wrap;justify-content: space-between;">
                        <img src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u482.png" alt="">
                        <div style="position:relative;bottom: 0;text-align: center;"><b>Switch</b></div>
                    </div>
                </div>
                <div v-for="item in comarr" :key="item.id">
                    <div style="margin-top: 20px;padding-top: 20px;border-top: 1px solid #ccc;">
                        <div style="display: flex;justify-content: space-between;align-items: center;">
                            <div style="display: flex;align-items: center;">
                                <img src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u444.png"
                                    alt="">
                                <div style="margin-left: 10px;">游戏人生</div>
                            </div>
                            <button @click="item.iS3 = !item.iS3" v-show="!item.iS3"
                                style="background-color: #000; color: white;width: 60px;border-radius: 12.5px;height: 25px;">+关注
                            </button>
                            <button @click="item.iS3 = !item.iS3" v-show="item.iS3"
                                style="background-color: #ccc;border:1px solid #ccc; color: white;width: 60px;border-radius: 12.5px;height: 25px;">已关注
                            </button>
                        </div>
                        <div style="margin-top: 15px;">
                            【名称】{{ item.name }}
                        </div>
                        <div>
                            【售价】￥{{ item.price }}
                        </div>
                        <div style="margin: 15px 0;">
                            <img style="border-radius: 10%;margin-right: 3%;" :src="item.img" alt="">
                            <img style="border-radius: 10%;margin-right: 3%;" :src="item.img2" alt="">
                            <img style="border-radius: 10%;margin-right: 0%;" :src="item.img3" alt="">
                        </div>
                        <div style="display: flex;justify-content: space-between;margin-top: 30px;">
                            <div style="font-size: 14px;">
                                {{ item.time }}
                            </div>
                            <div style="display: flex;align-items: center;">
                                <img @click=" item.iS = !item.iS, item.num1 += 1" v-show="!item.iS"
                                    src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u412.png"
                                    alt="">
                                <img @click=" item.iS = !item.iS, item.num1 -= 1" v-show="item.iS"
                                    src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u414.png"
                                    alt=""> <span style="margin-right: 30px;font-size: 12px;margin-left: 5px;">{{ item.num1
                                    }}</span>
                                <img @click=" item.iS2 = !item.iS2, item.num2 += 1" v-show="!item.iS2"
                                    src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u417.png"
                                    alt="">
                                <img @click=" item.iS2 = !item.iS2, item.num2 -= 1" v-show="item.iS2"
                                    src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u419.png"
                                    alt=""> <span style="margin-right: 30px;font-size: 12px;margin-left: 5px;">{{ item.num2
                                    }}</span>
                                <img src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u421.png"
                                    alt=""><span style="font-size: 12px;margin-left: 5px;">{{ item.num3 }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="关注" name="second" style="padding: 10px;">
                <div v-for="item in comarr2" :key="item.id">
                    <div style="">
                        <div style="display: flex;justify-content: space-between;align-items: center;">
                            <div style="display: flex;align-items: center;">
                                <img src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u444.png"
                                    alt="">
                                <div style="margin-left: 10px;">游戏人生</div>
                            </div>
                            <button @click="item.iS3 = !item.iS3" v-show="item.iS3"
                                style="background-color: #000; color: white;width: 60px;border-radius: 12.5px;height: 25px;">+关注
                            </button>
                            <button @click="item.iS3 = !item.iS3" v-show="!item.iS3"
                                style="background-color: #ccc;border:1px solid #ccc; color: white;width: 60px;border-radius: 12.5px;height: 25px;">已关注
                            </button>
                        </div>
                        <div style="margin-top: 15px;">
                            【名称】{{ item.name }}
                        </div>
                        <div>
                            【售价】￥{{ item.price }}
                        </div>
                        <div style="margin: 15px 0;">
                            <img style="border-radius: 10%;margin-right: 3%;" :src="item.img" alt="">
                            <img style="border-radius: 10%;margin-right: 3%;" :src="item.img2" alt="">
                            <img style="border-radius: 10%;margin-right: 0%;" :src="item.img3" alt="">
                        </div>
                        <div
                            style="display: flex;justify-content: space-between;margin-top: 30px;border-bottom: 1px solid #ccc;margin-bottom: 20px;">
                            <div style="font-size: 14px;">
                                {{ item.time }}
                            </div>
                            <div style="display: flex;align-items: center;margin-bottom: 20px;">
                                <img @click=" item.iS = !item.iS, item.num1 += 1" v-show="!item.iS"
                                    src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u412.png"
                                    alt="">
                                <img @click=" item.iS = !item.iS, item.num1 -= 1" v-show="item.iS"
                                    src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u414.png"
                                    alt=""> <span style="margin-right: 30px;font-size: 12px;margin-left: 5px;">{{ item.num1
                                    }}</span>
                                <img @click=" item.iS2 = !item.iS2, item.num2 += 1" v-show="!item.iS2"
                                    src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u417.png"
                                    alt="">
                                <img @click=" item.iS2 = !item.iS2, item.num2 -= 1" v-show="item.iS2"
                                    src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u419.png"
                                    alt=""> <span style="margin-right: 30px;font-size: 12px;margin-left: 5px;">{{ item.num2
                                    }}</span>
                                <img src="https://cdn7.axureshop.com/demo2024/2319582/images/%E7%A4%BE%E5%8C%BA/u421.png"
                                    alt=""><span style="font-size: 12px;margin-left: 5px;">{{ item.num3 }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template> 